<template>
    <div class="bf-box" :ref="`_bf+${cIndex}`">
        <div :ref="`_bf+${cIndex}_button`">
            <slot></slot>
        </div>
        <el-popover
                popper-class="btn-pop"
                placement="left"
                width="auto"
                trigger="hover">
            <slot></slot>
            <i slot="reference" class="el-icon-more fold-icon" v-show="isFold" ></i>
        </el-popover>
    </div>
</template>

<script>
    export default {
        name: '',
        props:{
            cIndex:{
                type:Number,
                default:0
            },
            time:{
                type:Number,
                default:null
            }
        },
        data(){
            return {
                width:'',
                isFold:false
            }
        },
        watch:{
            // 监听time，重新计算box宽度
            time(val){
                this.domInit();
            }
        },
        mounted(){
            this.domInit();
        },
        methods: {
            domInit(newWidth){

                const children = this.$refs[`_bf+${this.cIndex}_button`].children;
                this.$nextTick(()=>{
                    if(this.isFold || newWidth){
                        for(let k = 0,len = children.length;k<len;k++){
                            let d = children[k];
                            d.style.display = 'inline-block';
                        }
                    }

                    const offsetWidth = newWidth || this.$refs[`_bf+${this.cIndex}`].offsetWidth;
                    const scrollWidth = this.$refs[`_bf+${this.cIndex}`].scrollWidth;

                    this.isFold = offsetWidth < scrollWidth;

                    if(this.isFold){

                        let childrenWidth = [];
                        for(let i = 0,len = children.length;i < len;i++){
                            childrenWidth.push(children[i].offsetWidth)
                        }

                        let wSum = 0,bIndex = 0;
                        for(let i = 0,len = childrenWidth.length;i< len;i++){
                            wSum += childrenWidth[i];
                            i !== 0? wSum += 10 :'';
                            if(wSum < offsetWidth - 14){
                                bIndex = i;
                            }

                        }

                        for(let k = 0,len = children.length;k<len;k++){
                            let d = children[k];
                            k >= bIndex+1 ? d.style.display = 'none':d.style.display = 'inline-block'
                        }
                    }
                })
            },
        }
    }
</script>

<style  lang="scss">
    .bf-box{
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        min-width: 50px;
        .fold-icon{
            cursor: pointer;
            position: absolute;
            right: 10px;
            top:calc(50% - 5px);
            color: #1890FF;
        }
    }
     .btn-pop{
        min-width:20px;
        span,div{
            margin-right:5px;
        }
        /deep/ .el-button--text{
                   margin-left:6px;
               }
    }
</style>
